<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建客户</title>
<link rel="stylesheet" href="../acct/css/bootstrap.css">
<link rel="stylesheet" href="../acct/css/creat.css">
</head>
<body>
	<div id="cont">
	
		<form action="" id="form" style="opacity: 1;">
			<div id="one" style="display: block;">
			<c:forEach items="${msg }" var="msg">
				<div class="input-group creat">
					<span class="input-group-addon input_head">姓名 </span> <input
						type="text" class="form-control" name="user_name"
						placeholder="请填写真实姓名" value="${msg.userName }">
				</div>
				<div class="input-group creat">
					<span class="input-group-addon input_head">证件号</span> <input
						type="text" class="form-control cardNum" name="card_num"
						placeholder="请准确填写身份证号" value="${msg.cardNum }">
				</div>
				<div class="input-group creat">
					<span class="input-group-addon input_head">电话 </span> <input
						type="text" class="form-control" name="phone_num"
						placeholder="请正确填写手机号" value="${msg.phoneNum }">
				</div>
				<span id="validPhone" class="" aria-hidden="true" style="display:block;position:absolute;"></span>
				<div class="input-group creat">
					<span class="input-group-addon input_head">邮箱 </span> <input
						type="text" class="form-control" name="email"
						placeholder="请正确填写邮箱" value="${msg.email }">
				</div>
				</c:forEach>
				<div class="checkbox">
					<label> <input type="checkbox" id="ready"
						onclick="readys()"> 本人已阅读全部申请材料，充分了解并清楚知晓该借记卡产品的相关信息 <a
						href="http://www.ccb.com/cn/home/apply/agreement.html">《中国建设银行龙卡通领用协议》。</a>
					</label>
				</div>
				<button type="button" class="btn btn-default btn-lg active"
					id="button1" style="display: block;">下一步</button>
				<button type="button" class="btn btn-default btn-lg active"
					id="button2" style="display: none;" onclick="nexts()">下一步</button>
			</div>
			<div id="two" style="display: none">

				<div class="drop_down">
					<label class="lab_ads">申请卡种</label> <select
						class="selectpicker show-tick form-control"
						data-live-search="true" id="card_kind">
						<option value="">请选择</option>
						<option value="银联龙卡通">银联龙卡通</option>
					</select>
				</div>
				<div class="drop_down">
					<label class="lab_ads">领卡地区</label> <select
						class="selectpicker show-tick form-control address"
						data-live-search="true" id="shen" onchange="citys('shi');">
						<option>请选择</option>
						<c:forEach items="${branch }" var="bra">
							<option value="${bra.branchId}">${bra.branchName}</option>
						</c:forEach>
					</select> <select class="selectpicker show-tick form-control address"
						data-live-search="true" id="shi" onchange="district('qu')">
						<option value="">请选择</option>
					</select> <select class="selectpicker show-tick form-control address"
						data-live-search="true" id="qu" onchange="getCards('getCard');">
						<option value="">请选择</option>
					</select>
				</div>
				<div class="drop_down">
					<label class="lab_ads">领卡网点</label> <select
						class="selectpicker show-tick form-control"
						data-live-search="true" id="getCard">
						<option value="">请选择</option>
					</select>
				</div>
				<div class="creat drop_down">
					<label class="lab_ads pwd">设置密码 </label> <input
						type="password" class="form-control pwd_input" name="password"
						 value="" id="pwd1">
				</div>
				<div class="creat drop_down">
					<label class="lab_ads pwd">确认密码 </label> <input
						type="password" class="form-control pwd_input" name="checkPwd"
						 value="" onchange="checkPwds()" id="pwd2">
				</div>
				<p id="pwdMsg"></p>
				
				<button type="button" class="btn btn-default btn-lg active"
					id="submit" onclick="sub()">提交</button>
			</div>
			
		</form>
		<div id="success" style="display:none">
			<div id="msg_head">开卡成功</div>
			<div id=success_msg>
				<span class="msg_card">卡号</span>
				<span class="msg_card" id="msg_card"></span>
			</div>
			<label id="msg">请到选定的网点领取借记卡</label>
			<button id="back" onclick="comeback()">返回首页</button>
		</div>
	</div>

	<script type="text/javascript" src="../acct/js/jquery.min.js"></script>
	<script type="text/javascript" src="../acct/js/bootstrap.js"></script>
	<script type="text/javascript">
	
		function readys() {
			var button1 = document.getElementById("button1");
			var button2 = document.getElementById("button2");
			var name = document.forms[0].user_name.value;
			var card = document.forms[0].card_num.value;
			var phone = document.forms[0].phone_num.value;
			var email = document.forms[0].email.value;

			if ("block" == button1.style.display) {
				if ("" != name && "" != card && "" != phone && "" != email) {

					button1.style.display = "none";
					button2.style.display = "block";
				}
			} else {
				if ("" != name && "" != card
						&& "" != phone && "" != email) {

					button1.style.display = "block";
					button2.style.display = "none";
				}
			}
		}
		function nexts() {
			document.getElementById("one").style.display = "none"
			document.getElementById("two").style.display = "block"
		}

		function citys(id) {

			var citys = document.getElementById('shen').value;
			$
					.ajax({
						type : 'get',
						url : "changeShi", // ajax请求路径  
						data : {
							citys : citys
						},
						success : function(data) {
							if (data.code == "200") {
								var i = 0;
								var str = '<option  value="">请选择</option>';
								for (i; i < data.data.length; i++) {
									str = str
											+ '<option value="'+data.data[i].branchId+'">'
											+ data.data[i].branchName
											+ '</option>'

								}
								$("#"+id).html(str);

							} else {
								alert("服务器出现异常啦");
							}
						}
					});
		}

		function district(id) {

			var qu = document.getElementById('shi').value;
			$
					.ajax({
						type : 'get',
						url : "changeShi", // ajax请求路径  
						data : {
							citys : qu
						},
						success : function(data) {
							if (data.code == "200") {
								var i = 0;
								var str = '<option  value="">请选择</option>';
								for (i; i < data.data.length; i++) {
									str = str
											+ '<option value="'+data.data[i].branchId+'">'
											+ data.data[i].branchName
											+ '</option>'

								}
								$("#"+id).html(str);

							} else {
								alert("服务器出现异常啦");
							}
						}
					});
		}
		
		function getCards(id) {

			var citys = document.getElementById('qu').value;
			$
					.ajax({
						type : 'get',
						url : "changeShi", // ajax请求路径  
						data : {
							citys : citys
						},
						success : function(data) {
							if (data.code == "200") {
								var i = 0;
								var str = '<option  value="">请选择</option>';
								for (i; i < data.data.length; i++) {
									str = str
											+ '<option value="'+data.data[i].branchId+'">'
											+ data.data[i].branchName
											+ '</option>'

								}
								$("#"+id).html(str);

							} else {
								alert("服务器出现异常啦");
							}
						}
					});
		}
		
		function sub(){
			var pwd1 = $("#pwd1").val();
			$
			.ajax({
				type : 'post',
				url : "submit", // ajax请求路径  
				data : {
					data : pwd1
				},
				success : function(data) {
					if (data.code == "200") {
						document.getElementById("form").style.opacity="0.3";
						document.getElementById("success").style.display="block";
						document.getElementById("msg_card").innerHTML=data.data;

					} else {
						alert("开卡失败");
					}
				}
			});
			
		}
		function checkPwds(){
			var pwd1 = $("#pwd1").val();
			var pwd2 = $("#pwd2").val();
			if(pwd1!=pwd2){
				document.getElementById("pwdMsg").innerHTML="两次密码不一致";
				
			}
			if(pwd1==pwd2){
				document.getElementById("pwdMsg").innerHTML="";
			}
		}
		function comeback(){
			location.href="main";
		}
		
	</script>
</body>
</html>